<template>
  <div class="flex items-center justify-center min-h-screen">
    <div class="bg-white rounded-2xl shadow-2xl w-1/3 max-w-full p-8 transform transition-all duration-500 hover:shadow-xl">
      <!-- 品牌标志 -->
      <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white mb-4">
          <i class="fa fa-taxi text-2xl"></i>
        </div>
        <h1 class="text-3xl font-bold text-gray-800">小鹏taxi</h1>
      </div>

      <!-- 登录表单 -->
      <form @submit.prevent="login" class="space-y-6">
        <div class="space-y-3">
          <input
            v-model="username"
            type="text"
            class="w-full px-5 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 outline-none text-lg"
            placeholder="Username or Email"
          >
        </div>

        <div class="space-y-3">
          <input
            v-model="password"
            type="password"
            class="w-full px-5 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-300 outline-none text-lg"
            placeholder="Password"
          >
        </div>

        <button
          type="submit"
          class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-4 px-4 rounded-lg transition-all duration-300 transform hover:translate-y-[-2px] hover:shadow-lg text-lg"
        >
          登 录
        </button>
      </form>

      <!-- 底部链接 -->
      <div class="mt-6 flex justify-center space-x-4">
        <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">忘记密码?</a>
        <span class="text-gray-400">|</span>
        <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">注 册</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const username = ref('');
const password = ref('');
const router = useRouter();

const login = async () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码');
    return;
  }

  try {
    // await new Promise(resolve => setTimeout(resolve, 1000));
    router.push('/index');
  } catch (error) {
    alert('登录失败');
  }
};
</script>

